<template>
  <div id="ordering-app" align="center">
    <h1>点餐系统</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [ // 示例菜单数据，实际应来自API
        { id: 1, name: '汉堡', price: 10.0 },
        { id: 2, name: '薯条', price: 5.0 },
        // ... 其他菜单项
      ],
      cart: [], // 购物车数据
      totalPrice: 0, // 总价
    };
  },
  computed: {
    // 计算总价
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    },
  },
  methods: {
    // 添加到购物车
    addToCart(item) {
      let cartItem = this.cart.find(c => c.id === item.id);
      if (cartItem) {
        cartItem.quantity++;
      } else {
        this.cart.push({ ...item, quantity: 1 });
      }
    },
    // 从购物车移除
    removeFromCart(item) {
      this.cart = this.cart.filter(c => c.id !== item.id);
    },
    // 提交订单 (这里应该调用后端API)
    placeOrder() {
      // TODO: 发送订单数据到后端API
      // 例如：使用axios发送POST请求到/api/orders
      console.log('提交订单', this.cart);
      // 清空购物车（可选）
      this.cart = [];
    },
  },
};
</script>

<style scoped>
/* 样式代码 */
</style>
